<template lang="pug">
	.bind-wrap
		.bind-action
			.top-tip
				top-tip(tip="请认真填写身份证号，信息提交后无法修改")
			.bind-input
				input-line(placeholder="请输入手机号" type="number" @getValue="getPhone" maxlength="11")
				input-line(placeholder="请输入短信验证码" type="number" @getValue="getVerification" maxlength="6" mode="verification" codeType="5" time="120" :phone="phone")
			.bind-btn(@click="jumpToNext")
				main-button(text="确认绑定" :isActive="nextStepPass")
		.bind-result(:animation="resultAnimation")
			.result-title 已绑定健康台州账号：
			.result-phone 136****7869

</template>

<script>
import inputLine from '@/components/input-line'
import mainButton from '@/components/main-button'
import topTip from '@/components/top-tip'
export default {
	name: 'bind',
	data() {
		return {
			phone: '',
			code: '',
			nextStepPassPhone: false,
			nextStepPassCode: false,
			resultAnimation: '',
			clientWidth: 0
		}
	},
	computed: {
		nextStepPass() {
			return this.nextStepPassPhone && this.nextStepPassCode
		}
	},
	created() {},
	mounted() {
		let that = this
		this.wx.getSystemInfo({
			success: function(res) {
				that.clientWidth = res.windowWidth
			}
		})
	},
	methods: {
		jumpToNext() {
			if (this.nextStepPass) {
				this.submit()
			}
		},
		getPhone(text) {
			text = text.toString()
			this.phone = text
			if (text.length === 11) {
				this.nextStepPassPhone = this.tools.isMobile(text)
			} else {
				this.nextStepPassPhone = false
			}
		},
		getVerification(text) {
			text = text.toString()
			this.code = text
			this.nextStepPassCode = text.length >= 4
		},
		submit() {
			let animation = wx.createAnimation({
				duration: 300,
				timingFunction: 'ease'
			})
			animation.translate3d(-this.clientWidth, 0, 0).step()
			this.resultAnimation = animation.export()
		}
	},
	components: {
		inputLine,
		mainButton,
		topTip
	}
}
</script>

<style lang="stylus">
	.bind-wrap
		.bind-action
			.top-tip
				padding mainPadding
			.bind-input
				background-color white
			.bind-btn
				width 690px
				height 92px
				margin 80px auto 0
				border-radius 46px
				overflow hidden
		.bind-result
			position fixed
			top 0
			left 100%
			width 100%
			height 100%
			padding 70px mainPadding 0
			box-sizing border-box
			z-index 10
			background-color backgroundColor
			.result-title
				font-size 28px
				padding-bottom 40px
				color blackFontColor66
			.result-phone
				font-size 60px

</style>
